<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
        .big{
            border:1px solid;
            width:500px;
            height:300px;
            margin:100px auto;
        }
        #name{
            border:1px solid;
            width:140px;
            height:50px;
            margin:100px auto;
            font-size:28px;
            font-weight:bold;
            padding-left:80px;

        }
        #btn{
            width:100px;
            height:25px;
            margin-left:200px;
        }
    </style>
</head>
<body>
    <h1>点名器</h1>
    <hr>
    
    <div class="big">
        <div id="name"></div>
        <button id="btn"> 开始 </button>
    </div>
    <script>
        var stu = new Array('1','2','3','4','5','6');
        console.log(stu);
 
        var btn = document.getElementById('btn');
        var name = document.getElementById('name');
        var mark = 0;
        btn.onclick = function(){
            mark++;
            btn.innerHTML = '暂停';
            function demo(){
            var num =1 + Math.round(Math.random()*(stu.length-1));
            console.log(num-1);
            document.getElementById('name').innerHTML = stu[num-1];
            if (mark%2==0) {
            clearInterval(time);
            btn.innerHTML = '开始';

          }
            // console.log(stu[num]);
          }
          var time = setInterval(demo,10);
          

        }

        

    </script>

</body>
</html>